<template>
   <van-nav-bar title="时间选择" @click-left="onClickLeft" left-text="返回" left-arrow></van-nav-bar>
  <div class="timePage">
    <div>
      <van-tabs :active="active" @click-tab="handleChange">
        <van-tab name="0" title="月报" key="月报"></van-tab>
        <van-tab name="1" title="周报" key="周报"></van-tab>
      </van-tabs>
      <div  style="padding: 10px 0;display: flex; flex-direction: column;gap: 10px;border-radius: 20px;overflow: hidden;">
        <van-cell v-if="active ==0 " @click="goPoster(item.date,'yue')" :title="item.lable" is-link v-for="item in previousYearMonthArray"  />
        <van-cell v-else @click="goPoster(week.date,'zhou')" :title="`${week.year}年 第 ${week.week} 周`" is-link v-for="week in previousWeeks"  />
      </div>
    </div>
  </div>

</template>
<script setup>
import { useRouter,useRoute } from "vue-router";
import { ref } from "vue"
const router = useRouter();
const route = useRoute();
const active = ref(route.query.active == undefined?0: route.query.active)

const onClickLeft = () => {
  router.push({
    path:"/uniquePath-region",
    query:{
       type:route.query.type
    }
  });
};


function handleChange(changeData){
  console.log(changeData)
  active.value=changeData.name
}
function goPoster(time,type){
  let date;
  if(type == 'yue'){
    date=getMonthRange(time)
  }else{
    date=getWeekStartEnd(time)
  }
  router.push(
    {
      path:"/uniquePath-poster",
      query:{
        type:route.query.type,
        scope:route.query.scope,
        active:active.value,
        ...date
      },
     
    }
  );
}
//params
function generatePreviousYearMonthArray() {
  const currentDate = new Date();
  const currentYear = currentDate.getFullYear();
  const currentMonth = currentDate.getMonth(); // 0-11
  const result = [];
  
  // 生成前一年的月份（从当前月份的前一个月开始，回溯12个月）
  for (let i = 12; i >= 0; i--) {
    const month = (currentMonth + i) % 12;
    const year = currentYear - 1 + Math.floor((currentMonth + i) / 12);
    result.push({lable:formatDate(year, month),date:new Date(year,month).getTime()});
  }

  return result;
}

// 辅助函数：格式化日期为 yy-mm
function formatDate(year, month) {
  const yy = String(year);
  const mm = String(month + 1).padStart(2, '0');
  return `${yy}年-${mm}月`;
}

// 使用示例
const previousYearMonthArray = generatePreviousYearMonthArray();
function getPreviousWeeks(count) {
    const weeks = [];
    const currentDate = new Date();
    for (let i = 0; i < count; i++) {
        const targetDate = new Date(currentDate);
        targetDate.setDate(currentDate.getDate() - i * 7);
        // 设置为星期四以计算ISO周
        targetDate.setDate(targetDate.getDate() + 3 - (targetDate.getDay() || 7));
        const yearStart = new Date(targetDate.getFullYear(), 0, 1);
        const weekNumber = Math.ceil((((targetDate - yearStart) / 86400000) + 1) / 7);
        weeks.push({
            year: targetDate.getFullYear(),
            week: weekNumber,
            date: new Date(currentDate).setDate(currentDate.getDate() - i * 7)
        });
    }
    
    return weeks;
}

// 获取过去20周
const previousWeeks = getPreviousWeeks(20);
function getMonthRange(timestamp) {
    const date = new Date(timestamp);
    // 获取当前月的第一天（月初）
    date.setDate(1);
    const startOfMonth = date.getTime();
    // 获取当前月的最后一天（月末）
    date.setMonth(date.getMonth() + 1);
    date.setDate(0); // 将日期设置为上个月最后一天，即本月最后一天
    const endOfMonth = date.getTime();
    return { start:startOfMonth, end:endOfMonth };
}

function getWeekStartEnd(timestamp) {
    const date = new Date(timestamp);
    
    // 设置日期为本周一的开始
    date.setHours(0, 0, 0, 0); // 清除时分秒
    date.setDate(date.getDate() - date.getDay() + (date.getDay() == 0 ? -6 : 1)); // 如果是周日，向前调整6天；否则，向前调整到周一
    const startOfWeek = date.getTime(); // 获取周一的时间戳
    
    // 设置日期为本周日的结束
    date.setDate(date.getDate() + 6); // 从周一开始，向后调整6天到周日
    const endOfWeek = date.getTime(); // 获取周日的时间戳
    
    return { start:startOfWeek, end:endOfWeek };
}   

</script>

<style>

.timePage{
  width: 100%;
  height: 100%;
  background:#f5f5f5;
  padding: 10px;
}
.van-tabs__line {
  width: 200px;
  background-color: #1989fa;
}

.van-cell__title {
  text-align: left;
}
</style>